<template>
    <div class="renyuan-bg">
        <GisplusTitle></GisplusTitle>
        <div class="renyuan-box-left flex-column-center">
            <div class="renyuan-box1 renyuan-box">
                <div class="renyuan-box-title">
                    <span>风险情况</span>
                    <router-link target="_blank" to="/gisconfig?type=1" class="box-title-jump">查看详情</router-link>
                </div>
                <echarts id="fengxianqingkuang" :option="fxfb" :styles="styles"></echarts>
            </div>
            <div class="renyuan-box2 renyuan-box">
                <div class="renyuan-box-title">
                    <span>环保问题</span>
                </div>
                <echarts id="huanbaowenti" :option="hbwt_data" :styles="styles"></echarts>
            </div>
        </div>
        <div class="renyuan-box-mid flex-column-center">
            <div class="renyuan-box3 renyuan-box">
                <div class="renyuan-box-title">
                    <span>安全隐患</span>
                    <router-link target="_blank" to="/gisconfig?type=2" class="box-title-jump">查看详情</router-link>
                </div>
                <div class="flex-inline-center-around">
                    <div>
                        <echarts id="anquanyinhuan1" :option="aqyh_dept_data" :styles="styles"></echarts>
                    </div>
                    <div>
                        <echarts id="anquanyinhuan2" :option="aqyh_level_data" :styles="styles"></echarts>
                    </div>
                </div>
            </div>
            <div class="renyuan-box4 renyuan-box">
                <div class="renyuan-box-title">隐患趋势</div>
                <echarts id="qushi" :option="yhqs_data" :styles="yhqs_styles"></echarts>
            </div>
        </div>
        <div class="renyuan-box-right flex-column-center">
            <div class="renyuan-box5 renyuan-box">
                <div class="renyuan-box-title">隐患分布</div>
                <echarts id="anzhaozhuanye1" :option="yhfb_data" :styles="yhfb_style"></echarts>
            </div>
            <div class="renyuan-box5 renyuan-box">
                <div class="renyuan-box-title">隐患整治</div>
                <echarts id="anzhaozhuanye2" :option="yhzz_data" :styles="styles"></echarts>
            </div>
        </div>
    </div>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue'
  import GisplusTitle from '@/components/gisplus/GisplusTitle.vue'

  export default {
    name: 'anbao',
    data () {
      return {
        // 风险分布
        fxfb: {
          color: ['#00da07', '#95e647', '#fbb63d', '#f37961', '#ea0b00'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            top: '10%',
            data: ['一级', '二级', '三级', '四级', '五级'],
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '风险情况',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['40%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {value: 2, name: '一级'},
                {value: 21, name: '二级'},
                {value: 15, name: '三级'},
                {value: 2, name: '四级'},
                {value: 0, name: '五级'},
              ]
            }
          ]
        },
        //安全隐患部门
        aqyh_dept: {
          dept1: 0,
          dept2: 0,
          dept3: 0,
          dept4: 0,
          zongbao: 0
        },
        //安全隐患等级
        aqyh_level: {
          yiban: 0,
          zhongda: 0
        },
        // 隐患分布
        yhfb: {
          jiaoan: 0,
          jidian: 0,
          luji: 0,
          lumian: 0,
          qiaoliang: 0,
          qita: 0,
          suidao: 0
        },
        //环保问题
        hbwt: {
          overdue: 0,
          processed: 0,
          sum: 0,
          untreated: 0
        },
        //隐患趋势
        yhqs: {
          month: [],
          sumCount: [],
          untreatedCount: []
        },
        //隐患整治
        yhzz: {
          overdue: 0,
          processed: 0,
          sum: 0,
          untreated: 0
        },
        yhqs_styles: {
          width: '8rem',
          height: '3rem',
          margin: '0 auto'
        },
        styles: {
          width: '3rem',
          height: '3rem',
          margin: '0 auto'
        },
        yhfb_style: {
          width: '3.5rem',
          height: '3.5rem',
          margin: '0 auto'
        },
      }
    },
    components: {
      echarts, GisplusTitle
    },
    computed: {
      //安全隐患部门
      aqyh_dept_data () {
        return {
          color: ['#00ff00', '#fff500', '#ff0043', '#a500ff', '#0041ff'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            top: '10%',
            data: ['一分部', '二分部', '三分部', '四分部', '总包'],
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '隐患分布',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['40%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {value: this.aqyh_dept.dept1, name: '一分部'},
                {value: this.aqyh_dept.dept2, name: '二分部'},
                {value: this.aqyh_dept.dept3, name: '三分部'},
                {value: this.aqyh_dept.dept4, name: '四分部'},
                {value: this.aqyh_dept.zongbao, name: '总包'},
              ]
            }
          ]
        }
      },
      //安全隐患等级
      aqyh_level_data () {
        return {
          color: ['#ffff13', '#ff1400'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            top: '10%',
            data: ['一般隐患', '重大隐患'],
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '隐患等级',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['40%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {value: this.aqyh_level.yiban, name: '一般隐患'},
                {value: this.aqyh_level.zhongda, name: '重大隐患'}
              ]
            }
          ]
        }
      },
      // 隐患分布
      yhfb_data () {
        return {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}'
          },
          radar: [
            {
              indicator: [
                {text: '路基', max: Math.max.apply(null, this.yhfb.sum), min: 0},
                {text: '桥梁', max: Math.max.apply(null, this.yhfb.sum), min: 0},
                {text: '隧道', max: Math.max.apply(null, this.yhfb.sum), min: 0},
                {text: '路面', max: Math.max.apply(null, this.yhfb.sum), min: 0},
                {text: '交安', max: Math.max.apply(null, this.yhfb.sum), min: 0},
                {text: '机电', max: Math.max.apply(null, this.yhfb.sum), min: 0},
                {text: '其他', max: Math.max.apply(null, this.yhfb.sum), min: 0},
              ],

              center: ['50%', '50%'],
              radius: 100,
              startAngle: 90,
              splitNumber: 4,
              shape: 'circle',
              name: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff349',
                  fontSize: 18
                }
              },
              splitArea: {
                areaStyle: {
                  color: ['rgba(114, 172, 209, 0.2)',
                    'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
                    'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
                  shadowColor: 'rgba(0, 0, 0, 0.3)',
                  shadowBlur: 10
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.5)'
                }
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.5)'
                }
              }
            },
          ],
          series: [
            {
              name: '问题汇总',
              type: 'radar',
              itemStyle: {
                emphasis: {
                  // color: 各异,
                  lineStyle: {
                    width: 4
                  }
                }
              },
              data: [
                {
                  value: this.yhfb.sum,
                  name: '问题汇总',
                  symbol: 'rect',
                  symbolSize: 5,
                  lineStyle: {
                    normal: {
                      // type: 'dashed'
                    },
                  }
                },
              ]
            },
          ]
        }
      },
      //环保问题
      hbwt_data () {
        return {
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
          },
          yAxis: {
            type: 'category',
            data: ['总数', '已整改', '未整改', '逾期'],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
          },
          series: [
            {
              data: [
                {itemStyle: {color: '#00f7ff'}, value: this.hbwt.sum},
                {itemStyle: {color: '#0eff00'}, value: this.hbwt.processed},
                {itemStyle: {color: '#ff4600'}, value: this.hbwt.untreated},
                {itemStyle: {color: '#ff00cc'}, value: this.hbwt.overdue}
              ],
              type: 'bar',
              color: '#fff'
            },
          ]
        }
      },
      //隐患趋势
      yhqs_data () {
        return {
          color: ['#5793f3', '#d14a61', '#675bba'],
          tooltip: {
            trigger: 'none',
            axisPointer: {
              type: 'cross',
              snap: true
            },
          },
          legend: {
            data: ['发现隐患', '未消除隐患'],
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            top: 70,
            bottom: 50
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: '#d14a61'
                }
              },
              axisPointer: {
                label: {
                  formatter: function (params) {
                    console.log(params)
                    return '未消除隐患  ' + params.value
                      + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  }
                }
              },
              data: this.yhqs.month
            },
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: '#5793f3'
                }
              },
              axisPointer: {
                label: {
                  formatter: function (params) {
                    console.log(params)
                    return '发现隐患  ' + params.value
                      + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  }
                }
              },
              data: this.yhqs.month
            }
          ],
          yAxis: [
            {
              minInterval: 1,
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#fff',
                }
              },
              axisPointer: {
                label: {
                  color: '#000'
                }
              }
            }
          ],
          series: [
            {
              name: '发现隐患',
              type: 'line',
              xAxisIndex: 1,
              smooth: true,
              areaStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(87, 147, 243, 0.5)'
                      }, {
                        offset: 0.8,
                        color: 'rgba(87, 147, 243, 0)'
                      }],
                    global: false // 缺省为 false
                  },
                  shadowColor: 'rgba(87, 147, 243, 0.2)',
                  shadowBlur: 10
                }
              },
              data: this.yhqs.sumCount
            },
            {
              name: '未消除隐患',
              type: 'line',
              smooth: true,
              areaStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(209, 74, 97, 0.5)'
                      }, {
                        offset: 0.8,
                        color: 'rgba(209, 74, 97, 0)'
                      }],
                    global: false // 缺省为 false
                  },
                  shadowColor: 'rgba(0, 0, 0, 0.2)',
                  shadowBlur: 10
                }
              },
              data: this.yhqs.untreatedCount
            }
          ]
        }
      },
      //隐患整治
      yhzz_data () {
        return {
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
          },
          yAxis: {
            type: 'category',
            data: ['总数', '已整改', '未整改', '逾期'],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
          },
          series: [
            {
              data: [
                {itemStyle: {color: '#00f7ff'}, value: this.yhzz.sum},
                {itemStyle: {color: '#0eff00'}, value: this.yhzz.processed},
                {itemStyle: {color: '#ff4600'}, value: this.yhzz.untreated},
                {itemStyle: {color: '#ff00cc'}, value: this.yhzz.overdue}
              ],
              type: 'bar',
              color: '#fff'
            },
          ]
        }
      }
    },
    mounted () {
      this.getAqhb(12)
    },
    methods: {
      getAqhb (params) {
        const that = this
        return that.request.getAqhb(params).then(function (response) {
            let aqhb = response.content
            console.log(aqhb)
            that.aqyh_dept = aqhb.aqyh_dept
            that.aqyh_level = aqhb.aqyh_level
            that.hbwt = aqhb.hbwt
            that.yhqs = aqhb.yhqs
            that.yhzz = aqhb.yhzz
            that.yhfb = aqhb.yhfb
          })
          .catch(function (error) {
            that.fetchError = error
          })
      },
    }
  }
</script>

<style scoped lang="scss">
    .renyuan-bg {
        width: 100%;
        padding: 1.2rem 0.5rem 0.5rem;
        background-image: url('../../assets/img/renyuan-bg.png');
        display: flex;
        justify-content: space-between;

        .renyuan-box-left {
            width: 3.5rem;
        }

        .renyuan-box-mid {
            width: 8rem;
        }

        .renyuan-box-right {
            width: 4rem;
        }
    }

    .renyuan-box {
        background-image: url('../../assets/img/renyuan-box.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .renyuan-box1 {
        width: 100%;
        flex: 1;
    }

    .renyuan-box2 {
        width: 100%;
        flex: 1;
        margin-top: 0.1rem;
    }

    .renyuan-box3 {
        width: 100%;
        flex: 1;
    }

    .renyuan-box4 {
        width: 100%;
        flex: 1;
        margin-top: 0.1rem;
    }

    .renyuan-box5 {
        width: 100%;
        flex: 1;
        padding-right: 0.1rem;
    }

    .renyuan-box-title {
        font-size: 0.18rem;
        padding: 0.1rem 0.2rem;
        font-weight: bold;
        color: #5AC8FA;
        display: flex;
        justify-content: space-between;
    }

    .box-title-jump {
        cursor: pointer;
        color: #F8BC38;
    }

    .img-box-s {
        height: 3rem;
        display: flex;
        padding-right: 0.5rem;
        justify-content: space-between;

        .img-box-s-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .img-box-s-mid {
            flex: 3;
        }

        .img-box-s-right {
            flex: 1;
            font-size: 0.16rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: 0.3rem 0;
            color: #fff;
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.3);
        }
    }

    .renyuan-img {
        position: relative;

        img {
            display: block;
            margin: 0 auto;
            width: 1rem;
            height: 1rem;
        }

        .renyuan-num {
            width: 0.34rem;
            font-size: 0.34rem;
            color: #fff;
            position: absolute;
            top: 10%;
            left: 0;
            right: 0;
            margin: 0 auto;
            font-family: Agency FB;
        }

        .renyuan-text {
            width: 0.96rem;
            font-size: 0.16rem;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            margin: 0 auto;
            text-align: center;
        }
    }
</style>
